<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>选项卡作业</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .box {
        position: absolute;
        left: calc(50% - 150px);
        top: calc(50% - 100px);
        width: 300px;
        height: 200px;
        border: 1px solid #000;
      }
      ul {
        height: 30px;
        display: flex;
      }
      ul li {
        text-align: center;
        line-height: 30px;
        width: 100px;
        height: 30px;
        /* background-color: pink; */
      }
      .box div {
        display: none;
        position: absolute;
        width: 100%;
        height: 170px;
      }

      .active {
        background-color: skyblue;
      }

      .box .mainactive {
        background-color: skyblue;
        display: block;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <ul>
        <li class="active">标题一</li>
        <li>标题二</li>
        <li>标题三</li>
      </ul>

      <div class="mainactive">内容一</div>
      <div>内容二</div>
      <div>内容三</div>
    </div>
    <script>
      let li = document.querySelectorAll('li');
      let div = document.querySelector('.box').querySelectorAll('div');

      let index = 0;

      function getcard(li, div) {
        for (let i = 0; i < li.length; i++) {
          li[i].onclick = function () {
            //   for (let j = 0; j < li.length; j++) {
            //     li[j].classList.toggle('active', false);
            //     div[j].classList.toggle('mainactive', false);
            //   }
            //   li[i].classList.toggle('active');
            //   div[i].classList.toggle('mainactive');

            li[index].className = '';
            div[index].className = '';
            index = i;
            li[i].className = 'active';
            div[i].className = 'mainactive';
          };
        }
      }
      getcard(li, div);
    </script>
  </body>
</html>
